﻿<!DOCTYPE html>
<html>
<head>
    <title>Lava: Editable Grid</title>
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
    <link href='../css/demos.css' rel='stylesheet' type='text/css'>
    <link href='../css/editable-grid.css' rel='stylesheet' type='text/css'>
    <script src="../scripts/lava.js" type="text/javascript"></script>
    <script type="text/html" id="movie-template">
        <tr>
            <td><input type="text" data-template="{value: [i].title}" /></td>
            <td><input type="text" data-template="{value: [i].year}" /></td>
            <td><input type="text" data-template="{value: [i].rating}" /></td>
            <td style="width:100px;text-align:center"><input type="checkbox" data-template="{checked: [i].seen}" /></td>
            <td style="border:none">
                <button class="red" data-template="{click: {bind: MovieController.deleteMovie, args: { item: [i] }}}" title="Delete Movie">x</button>
            </td>
        </tr>
    </script>
</head>
<body>
    <div class="content">
        <h1 id="header">My Movies</h1>
        <img class="img-button f-left" src="../images/new.png" data-bind="{click: MovieController.addMovie}" title="New Movie" />
        <h3 class="f-left" data-bind="{text: MovieController.totalMovies}" style="margin-left:400px"></h3>
        <div class="clear-10"></div>
        <table class="f-left">
            <thead>
                <tr>
                    <th style="text-align:left">Title</th>
                    <th style="text-align:left">Year</th>
                    <th style="text-align:left">Rating</th>
                    <th>Seen It!</th>
                </tr>
            </thead>
            <tbody data-bind="{foreach: {bind: MovieController.movies, template: 'movie-template'}}"></tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>Total: <span data-bind="{text: MovieController.totalSeen}"></span></td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script type="text/javascript">
        var Movie = Lava.Object({
            title: '',
            year: 0,
            rating: 0,
            seen: false
        });

        var MovieController = Lava.Controller({
            movies: [],
            addMovie: function () {
                this.movies.add(Movie.clone());
                //this.totalMovies.trigger();
            },
            deleteMovie: function (e, args) {
                this.movies.remove(args.item);
                if(this.movies.length == 0) {
                    this.movies.add(Movie.clone());
                }
                this.totalSeen.trigger();
                this.totalMovies.trigger();
            },
            totalSeen: Lava.Computed('MovieController.movies[@each].seen', function () {
                var count = 0;
                MovieController.movies.forEach(function (item) {
                    count += item.seen ? 1 : 0;
                });
                return count;
            }),
            totalMovies: Lava.Computed('MovieController.movies[@each].seen', function () {
                return 'Total Movies:  ' + this.movies.length;
            })
        });

        MovieController.addMovie();
    </script>
</body>
</html>
